<template>
    <div v-if="userInf">
        <div class="header">
            <div class="right">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji"></use>
                </svg>
            </div>
        </div>
    <div class="information flex" >
        <div class="in-left" @click="showImg">
            <van-image
            width="2rem"
            height="2rem"
            radius=".2rem"
            fit="cover"
            :src="userInf.avatar"
            />
        </div>
        <div class="in-center f-col f-1">
            <div class="name">{{userInf.nickname}}</div>
            <div class="number">微信号:{{userInf.weNum}}</div>
        </div>
        <div class="in-right flex">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ico"></use>
                </svg>
            <svg class="icon" aria-hidden="true"  @click="showMineDetail">
                <use xlink:href="#icon-arrow-right-ico"></use>
                </svg>
        </div>
    </div>
     <div v-for="(item,index) in mineList" :key="index">
  <cell-list :itemList="item" @sendEvent='sendEvent'></cell-list>
    </div>
    </div>
</template>
<script>
import cellList from './common/cellList';
import {Meteor} from 'meteor/meteor';
import { image, user } from '../../api/collections/index';
import { ImagePreview } from 'vant';
export default {
    components:{
        cellList
    },
   meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const id = sessionStorage.getItem('user')
        const getUser = user.findOne({_id:id})
        if(getUser){
             const avatar = image.findOne({_id:getUser.avatarId})
        if(!getUser.weNum){
            Meteor.call('user.updateWeNum',{
                userId:id,
                weNum:'wxid_'+id
            })
        }
       avatar&&(getUser.avatar = avatar.base64)
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
        return  getUser
    },
    },
    data(){
        return{
        mineList:[
          {
          separate:true,
          describe:'支付',
          icon:'#icon-wechat-pay',
          content:'',
          color:'#1CB164',
          event:'toPay'
        },
         {
          separate:false,
         moreList:[
           {
              describe:'收藏',
              icon:'#icon-wechatEnshrine',
              content:'',
              color:''
           },
           {
              describe:'相册',
              icon:'#icon-photo',
              content:'',
              color:'#197BD8'
           },
           {
              describe:'卡包',
              icon:'#icon-qiabao',
              content:'',
              color:'#1A7FE1'
           },
           {
              describe:'表情',
              icon:'#icon-biaoqing',
              content:'',
              color:'#EE9E4B'
           }
         ]
        },
         {
          separate:true,
          describe:'设置',
          icon:'#icon-shezhi',
          content:'',
          color:'#2584DF',
          event:'setting'
        }
        ],
        id:sessionStorage.getItem('user')
        }
    },
    methods:{
    sendEvent(e){
      switch(e){
          case 'setting':this.$router.push('/setting/'+this.id);break;
          case 'toPay':this.$router.push('/payInf/'+this.id);break;
        default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
      }
    },
    showMineDetail(){
        this.$router.push('/mineDetail')
    },
    showImg(){
      ImagePreview({
        images: [
            this.userInf.avatar
        ],
        showIndex:false
        });
    }
    }
}
</script>
<style scoped>
.header{
    width: 100%;
    height: 1.5rem;
    background-color: #fff;
}
.right{
      text-align: right;
      line-height: 1.5rem; 
      font-size: 1rem; 
      margin-right: .3rem;
}
.information{
    position: relative;
    background-color: #fff;
    padding: .7rem .5rem;
    margin-bottom: .4rem;
}
.in-center{
    margin-left: .5rem;
}
.name{
    font-weight: 700;
    font-size: .8rem;
}
.number{
    font-size: .4rem;
    margin-top: .2rem;
    color: #7F7F7F;
}
.in-right{
    position: absolute;
    bottom: 1.3rem;
    right: .5rem;
    font-size: .5rem;
}
.in-right .icon:first-child{
    margin-right: .5rem;
    color: #7F7F7F;
}
</style>